<template>
    <router-link tag="div" :to="'/'+item.type+'/detail/'+item.id" :class="{'card-custom' : item.oprice&&item.oprice.length > 0}" class="pic-txt-com clear-fix">
        <div class="up-pic">
            <span class="pic">
                <img v-if="item.src&&item.src.length > 0" :src="item.src" alt="">
            </span>
            <i v-if="item.label&&item.label.length > 0" class="label">{{item.label}}</i>
        </div>
        <div class="dowm-txt">
            <h3 class="title">{{item.title}}</h3>
            <p class="txt">{{item.desc}}</p>
            <p class="num">
                {{item.price}}
                <span v-if="item.oprice&& item.oprice.length > 0">{{item.oprice}}</span>
            </p>
        </div>
    </router-link>
</template>

<script>
export default {
    name: 'pictxtcomponents',
    props: {
        item: {
            type: Object,
            default ( ) {
                return {
                    src: '',
                    label: '新品',
                    title: '标题',
                    desc: '描述',
                    price: '￥99'
                }
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl'
.pic-txt-com 
    width 100%
    height auto 
    padding-top 10px
    .up-pic 
        width 100%
        height auto 
        float left
        position relative
        .pic 
            width 100%
            height auto
            min-height 108px
            background-color #d8d8d8 
            display block
            img 
                display block 
                width 100%
        .label 
            position absolute 
            right -5px 
            top -10px
            padding 2px 10px
            border-radius 10px
            font-size 12px
            background-color #FFA822
            color #fff      
    .dowm-txt 
        width 100%
        height  auto
        float left 
        overflow hidden
        .title 
            font-size 14px
            color #1A1A1A
            height 25px
            line-height 30px
            ellipsis()           
        .txt 
            font-size 12px 
            color #A7A7A7
            height 25px
            line-height 25px
            ellipsis()
        .num 
            font-size 10px
            color #FF3838 
            height 25px
            line-height 25px
            position relative
            span 
                text-decoration line-through
                position absolute 
                right 0
                top 0
.card-custom .dowm-txt .num 
    color #666

</style>